"use strict";

/**
 * @auther wtfssd
 * Created by wtfssd on 2017/10/24
 */
import * as React from 'react'

const {View, StyleSheet, FlatList, TouchableOpacity, DeviceEventEmitter} = require('react-native');
const NavigationBar = require('react-native-navbar').default;
const {Actions} = require("react-native-router-flux");
const {connect} = require('react-redux');
import {autoSize, commonProps, commonStyles} from "../../assets/styles/common";
import NavRightButton from "../../component/RightButton";
import Avatar from "../../component/Avatar";
import MyText from "../../component/MyText";
import Colors from "../../assets/styles/Colors";
import {messageStyle} from "../../assets/styles/message";
import {MessagePage} from "../../interface/router";
import Request from "../../utils/Request";

class Page extends React.Component<MessagePage, any> {

    goToPage = (sceneKey, props = {}) => {
        Actions.push(sceneKey, props);
    };


    getNewMessageCount = (item: friendItem) => {
        let count = 0;
        this.props.message.list.map((m: messageItem) => {
            if (m&&item.receiver === m.username) {
                count++;
            }
        });
        return count > 0 ? `(${count}条新消息)` : '';
    };
    renderItem = (props) => {
        const item: friendItem = props.item;
        return (
            <TouchableOpacity
                onPress={this.goToPage.bind(this, 'chat', {title: item.receiverName, receiver: item.receiver})}>
                <View style={[commonStyles.flexRow, messageStyle.messageContainer]}>
                    <View style={[commonStyles.centerVH]}>
                        <Avatar source={{uri: Request.checkImageUrl(item.receiverAvatar)}} size={autoSize(65)}/>
                    </View>
                    <View style={[commonStyles.flexColumn, commonStyles.flex1, messageStyle.infoContainer]}>
                        <MyText style={messageStyle.text} fontSize={15}
                                color={Colors.Title}>{`${item.receiverName}${this.getNewMessageCount(item)}`}</MyText>
                        <MyText style={messageStyle.text} fontSize={15} color={Colors.Title}
                                numberOfLines={1}>{item['newMessage'] ? '' : ''}</MyText>
                        <MyText style={messageStyle.text} fontSize={12} color={Colors.SubTitle}>{item.updated}</MyText>
                    </View>
                </View>
            </TouchableOpacity>
        )
    };


    onRefresh = () => {
        this.props.dispatch({type: 'chat/fetchFriends'});
    };

    render() {
        return (
            <View style={[commonStyles.container, {backgroundColor: Colors.White}]}>
                <NavigationBar {...commonProps.navBar}
                               rightButton={<NavRightButton
                                   icon={{name: 'icon-biji-copy', color: Colors.White, size: autoSize(24)}}
                                   onPress={Actions.newMessage}/>}
                               title={{title: this.props.title, tintColor: '#fff'}}
                />
                <FlatList data={this.props.chat.friendList}
                          extraData={this.props}
                          onRefresh={this.onRefresh}
                          refreshing={this.props.chat.loading}
                          keyExtractor={(_, index) => index}
                          renderItem={this.renderItem}
                />
            </View>
        );
    }
}

export default connect(
    ({auth, chat, message}) => ({auth, chat, message})
)(Page);